<template>
	<el-tabs v-bind="tabsConfig" v-model="activeName">
		<el-tab-pane label="基本信息" name="site"><siteBaseInfo></siteBaseInfo></el-tab-pane>
		<el-tab-pane label="默认图管理" name="image"><siteDefaultImage></siteDefaultImage></el-tab-pane>
		<el-tab-pane label="系统配置" name="3"></el-tab-pane>
		<el-tab-pane label="栏目配置" name="4"></el-tab-pane>
		<el-tab-pane label="数据配置" name="5"></el-tab-pane>
	</el-tabs>
</template>

<script>
import siteBaseInfo from './site/index';
import siteDataConfig from './data/index';
import siteConfigList from './config/index';
import siteColumnConfig from './column/index';
import siteSystemConfig from './system/index';
import siteDefaultImage from './default/index';
export default {
	components: { siteBaseInfo, siteColumnConfig, siteDataConfig, siteSystemConfig, siteDefaultImage, siteConfigList },
	data() {
		return {
			activeName: this.$route.query.tab || 'site',
			tabsConfig: {
				tabPosition: 'left',
				class: 'base_info_container',
				beforeLeave: this.handleBeforeLeave
			}
		};
	},
	methods: {
		handleBeforeLeave(newTab, oldTab) {
			this.$router.replace({ path: this.$route.fullPath, query: { tab: newTab } });
		}
	}
};
</script>

<style lang="scss" scoped>
.el-tabs.base_info_container::v-deep {
	display: flex;
	height: 100%;
	.el-tabs__header {
		width: 20%;
		display: flex;
		flex-shrink: 0;
		margin-right: 0;
		min-width: 200px;
		max-width: 300px;
		flex-direction: column-reverse;
	}
	.el-tabs__content {
		flex: 1;
		overflow: auto;
	}
	.el-tabs__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
		height: 48px;
		&:hover {
			background-color: rgba(0, 0, 0, 0.03);
		}
		&.is-active {
			font-weight: bold;
			background-color: var(--primary-background-hover);
		}
	}
	.el-tab-pane {
		height: 100%;
		overflow: hidden;
	}
}
</style>
